<template>
  <div class="cash">
    <div class="cash_title">提现审核</div>
    <!-- 表格 -->
    <el-table :data="cashData.list" style="width: 100%" id="cash_table">
      <el-table-column prop="id" label="编号" min-width="78" align="center"></el-table-column>
      <el-table-column prop="money" label="金额" min-width="175" align="center"></el-table-column>
      <el-table-column prop="type" label="类型" min-width="175" align="center"></el-table-column>
      <el-table-column prop="description" label="描述" min-width="175" align="center"></el-table-column>
      <el-table-column prop="userId" label="员工ID" min-width="175" align="center"></el-table-column>
      <el-table-column label="凭证" min-width="175" align="center">
        <template slot-scope="{row}">
          <el-button
            type="text"
            size="small"
            @click="checkCash(row)"
            v-if="row.transferAccounts!==''"
          >查看凭证</el-button>
          <el-button
            type="text"
            size="small"
            v-if="row.transferAccounts==''"
            @click="updata(row)"
          >上传凭证</el-button>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="150" align="center">
        <template slot-scope="{row}">
          <el-button type="text" size="small" v-if="row.status==1">已审核</el-button>
          <el-button type="text" size="small" v-if="row.status==0" @click="readyCash(row)">审核</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="cash_page">
      <el-pagination
        background
        @current-change="handleCurrentChange"
        :page-size="pageSize"
        layout="total, prev, pager, next"
        :total="total"
      ></el-pagination>
    </div>
    <!-- 模态框1 -->
    <el-dialog title="凭证" :visible.sync="dialogFormVisible" width="250px" height="280px">
      <div class="cash_box">
        <img :src="img" alt="加载失败">
      </div>
    </el-dialog>
    <!-- 模态框2 -->
    <el-dialog title="上传凭证" :visible.sync="dialogFormVisible2">
      <div class="cash_updata">
        <el-upload
          class="upload-demo"
          action="https://jsonplaceholder.typicode.com/posts/"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :before-remove="beforeRemove"
          multiple
          :limit="3"
          :on-exceed="handleExceed"
        >
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible2 = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { mapState, mapActions } from "vuex";
export default {
  data() {
    return {
      page: 0,
      pageSize: 5,
      total: 10,
      dialogFormVisible: false,
      dialogFormVisible2: false,
      id: "",
      img: ""
    };
  },
  created() {
    this.loadCashs();
  },
  computed: {
    ...mapState("cash", ["cashData"])
  },
  methods: {
    ...mapActions("cash", ["toLoadCash", "toReadyCash"]),
    updata(row) {
      if(row.status == 1){
        this.dialogFormVisible2 = true;
      }else{
        this.$message({
          message: "请先审核！",
          type: "warning"
        });
      }
    },
    readyCash(row) {
      let obj = {
        description: row.description,
        id: row.id,
        money: row.money,
        status: 1,
        transactionTime: "",
        type: "提现",
        userId: row.userId
      };

      this.toReadyCash(obj).then(res => {
        this.$message({
          message: "审核成功，需要上传凭证",
          type: "success"
        });
        this.loadCashs();
        row.status = 1;
      });
    },
    checkCash(row) {
      this.dialogFormVisible = true;
      this.id = row.id;
      this.img = "http://134.175.100.63:8686/group1/" + row.transferAccounts;
    },
    //加载
    loadCashs() {
      let obj = {
        page: this.page,
        pageSize: this.pageSize,
        type: "提现"
      };
      this.toLoadCash(obj).then(res => {
        this.total = this.cashData.total;
      });
    },
    //分页
    handleCurrentChange(val) {
      this.page = val - 1;
      this.loadCashs();
    },
    handleRemove(file, fileList) {
      // console.log(file, fileList);
    },
    handlePreview(file) {
      // console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${
          files.length
        } 个文件，共选择了 ${files.length + fileList.length} 个文件`
      );
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    }
  }
};
</script>
<style scope>
.cash {
  padding: 10px;
}
.cash_title {
  border-bottom: 1px solid #ccc;
  height: 35px;
  line-height: 35px;
}
.cash_page {
  margin-top: 10px;
}
.cash_box {
  width: 200px;
  height: 200px;
}
.cash_box > img {
  width: 200px;
  height: 200px;
  text-align: center;
}
</style>